<template>
  <div>
    <common-head title="商品详情"/>
    <div class="wrap">
      <!-- 商品图片展示 轮播 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          v-for="img in detail.pics"
          :key="img.id"
         >
          <img :src="img.pic" alt="">
        </van-swipe-item>
      </van-swipe>
      <!-- /商品图片展示 轮播 -->
      <h5 v-if="detail.basicInfo">
        {{ detail.basicInfo.name }}
      </h5>
      <!-- 详情渲染 -->
      <div class="content" v-html="content">
      </div>
    </div>
    <!-- 底部商品操作 -->
    <van-goods-action>
      <van-goods-action-icon
        @click="$router.push('/home')"
        icon="wap-home-o" text="首页" />
      <van-goods-action-icon 
        icon="cart-o" text="购物车" 
        :badge="items.length?items.length:''"
        @click="$router.push('/cart')"
        />
      <van-goods-action-button
        @click="showSku(1)"
        color="#be99ff" type="warning" text="加入购物车" />
      <van-goods-action-button
        @click="showSku(0)"
        color="#7232dd" type="danger" text="立即购买" />
    </van-goods-action>
    <!-- 商品行动 选择商品规则 -->
    <van-popup position="bottom"  :style="{ height: '40%' }" closeable round  v-model="show">
      <div class="content">
        <van-card
          :num="sku.num"
          :price="sku.minPrice"
          :desc="sku.characteristic"
          :title="sku.name"
          :thumb="sku.pic"
        >
          <template #footer>
            <van-stepper v-model="sku.num" theme="round" button-size="22" disable-input />
          </template>
        </van-card>
        <van-button @click="duoshou" size="large" round  type="danger">确定</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import CommonHead from 'components/CommonHead'
import { fetchItemDetail } from 'api'
import cartMixin from '../../mixins/cart'
/* import { Toast } from 'vant';*/
import {mapState } from 'vuex' 
export default {
  data () {
    return {
      detail: {
        content: ''
      },
      show: false,
      actionType:1, // 1加入购物车 0是立即购买
      sku:{ //购买商品加入购物车商品规格

      }
    }
  },
  created() {
    this.fetchDetail();
  },
  methods: {
    duoshou () {
      // 点击确认按钮  判断加入购物车还是 立即购买
      if (this.actionType) {
        // 加入购物车
        /*  // 添加购物车之前 判断购物车中是否已经有该商品
        let isExist = this.items.find(el => el.id === this.sku.id )
        if (isExist) {
          // 购物车中已经存在该商品
          Toast('购物车中已经有该商品，请勿重复添加')
          return;
        }
        this.addCart(this.sku)
        Toast('添加成功，请前往付钱吧') */
        this.add_Cart(this.sku)
        this.show = false
      } else {
        // 立即购买

      }
    },
    showSku (type) {
      this.actionType = type
      // 点击加入购物车和点击立即购买  显示 商品规格
      this.show = true
    },
    fetchDetail () {
      fetchItemDetail(this.$route.params.itemId).then(res=>{
        console.log(res)
        if ( res.data.code === 0 ) {
          this.detail = res.data.data
          // 商品弹出 规格
          this.sku = {
            ...res.data.data.basicInfo,
            num: 1,
            isChecked: true
          }
        }
      })
    },
    /*  ...mapMutations('cart', ['addCart']) */
  },
  computed: {
    content () {
      return this.detail.content.replace(/<img/g,'<img style="vertical-align:bottom"')
    } ,
     ...mapState({
      items: (state) => state.cart.items
    }) 
  },
  components: {
    CommonHead
  }
}

</script>

<style lang="scss" scoped>
 .wrap{
    padding-top:46px;
    padding-bottom:40px;
  }
.my-swipe{
  img{
    width: 100%;
  }
}
/*
.content /deep/ img{
  vertical-align: bottom;
}*/
</style>
